<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>详情 - Blog</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/detail.css">
</head>
<body>
<header class="layui-bg-cyan">
    <nav class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md2 logo">
                <a href="javascript:;"><img src="./static/images/logo.png"></a>
            </div>
            <div class="layui-col-md8 layui-hide-xs">
                <ul class="layui-nav layui-bg-cyan">
                    <li class="layui-nav-item">
                        <a href="index.html">首页</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="caty.html?type=javabase">JAVA基础</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="caty.html?type=db">数据库</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="caty.html?type=jsp">JSP</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="caty.html?type=framework">框架</a>
                    </li>
                </ul>
            </div>
            <div class="layui-col-md2 layui-hide-xs userinfoBox">
                <ul class="layui-nav layui-bg-cyan">
                    <ul class="layui-nav layui-bg-cyan">
                        <li class="layui-nav-item" lay-unselect="">
                            <span><img src="static/images/user01.png" class="layui-nav-img"></span>
                            <span title="name1"></span>
                            <dl class="layui-nav-child">
                                <dd><a href="main.html">后台管理</a></dd>
                                <dd><a href="login.html">退出账号</a></dd>
                            </dl>
                        </li>
                    </ul>
                </ul>
            </div>
        </div>
    </nav>
</header>

<div class="layui-container">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md8">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="main" name="详情">
                    </div>
                </div>
                <div class="layui-col-md12 margin20"></div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
								<span>
									相关推荐
								</span>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row" name="前三推荐">
                                <div class="layui-col-md4">
                                    <div class="layui-card">
                                        <a href="detail.html" class="layui-card-body recommend">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
								<span class="layui-breadcrumb" lay-separator="|">
									<a href="javascript:;">联系站长李坤</a>
								</span>
                        </div>
                        <div class="layui-card-body" id="binfo">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="120">
                                    <col width="230">
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td>QQ号：</td>
                                    <td>1273703401</td>
                                </tr>
                                <tr>
                                    <td>微信号：</td>
                                    <td>l1273703401</td>
                                </tr>
                                <tr>
                                    <td>qq群号：</td>
                                    <td>305648634</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12 margin20"></div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
								<span>
									热门文章
								</span>
                        </div>
                        <div class="layui-card-body">
                            <table class="layui-table" lay-skin="nob">
                                <tbody title="详情热门榜">

                            </table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12 margin20"></div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
								<span>
									捐助本站
								</span>
                        </div>
                        <div class="layui-card-body" style="text-align: center;">
                            <input type="image" src="static/images/qr.png" style="display: inline-block;" title="多给点钱">
                            <br/>
                            <p>无论多少，都是心意!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>
<footer class="layui-bg-cyan">
    <div class="layui-container">
    </div>
</footer>
</body>
<script src="./static/layui/layui.all.js"></script>
<script src="./static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    /*详情信息遍历*/
    $(document).ready(function () {
        var blogid = sessionStorage.getItem("blogid");
        /*详情页展示 接收blogid*/
        $.get("Blog/showBlogTextDetail", {"blogid": blogid}, function (showBlogTextDetail) {
            JSON.stringify(showBlogTextDetail);
            var htt = window.location.href;
            var wos = showBlogTextDetail.result;
            $("div[name='详情']").empty();
            $("<div class=\"title\">\n" +
                "<p>" + wos.title + "</p>\n" +
                "<div class=\"layui-row stat\">\n" +
                "<div class=\"layui-col-md3 layui-col-xs12\">发布时间：<em>" + wos.posttime + "</em></div>\n" +
                "<div class=\"layui-col-md2 layui-col-xs6\">分类：<a href=\"caty.html?type=javabase\">" + wos.type + "</a></div>\n" +
                "<div class=\"layui-col-md2 layui-col-xs6\">作者：<a href=\"javascript:;\">" + wos.author + "</a></div>\n" +
                "<div class=\"layui-col-md5 layui-col-xs12\">\n" +
                "<div class=\"layui-row\">\n" +
                "<div class=\"layui-col-md6 layui-col-xs6\">\n" +
                "<i class=\"layui-icon layui-icon-read\"></i>\n" +
                "<em>" + wos.clicknumber + "次阅读</em>\n" +
                "</div>\n" +
                "</div>\n" +
                "</div>\n" +
                "</div>\n" +
                "</div>\n" +
                "<div class=\"content\">\n" +
                "<p><img src=\"static/images/carousel -1.jpg\" alt=\"\" draggable=\"false\" style=\"display: block;\"></p>\n" +
                "<pre style='background-color:white; color:black' id='datail'></pre>\n" +
                "</div>\n" +
                "<div class=\"copyright\">\n" +
                "<p>本文链接：<a title='本文链接' name='" + wos.blogid + "' href='" + htt + "'>" + htt + "</a></p>\n" +
                "<p>转载声明：本站文章若无特别说明，皆为原创，转载请注明来源：" + wos.author + "的个人博客，谢谢！^^</p>\n" +
                "</div>\n" +
                "<div class=\"Label\">\n" +
                "<i class=\"layui-icon layui-icon-note\"></i>\n" +
                "<a href=\"caty.html?type=javabase\">" + wos.type + "</a>\n" +
                "</div>").appendTo("div[name='详情']");

            //使用split按 "代码示例：" 来分割（中文冒号）
            var content = wos.detail.split("代码示例：");
            //如果分割后长度为2，说明有代码模块，此时添加代码模块标签进去
            if (content.length == 2) {
                $("[class='content']").empty();
                $(  "<div class=\"content\">\n" +
                    "<p><img src=\"static/images/carousel -1.jpg\" alt=\"\" draggable=\"false\" style=\"display: block;\"></p>\n" +
                    "<pre style='background-color:white; color:black' id='datail'></pre>\n" +
                    "<pre class=\"prettyprint lang-cs\">代码示例：\n" + content[1] +
                    "</pre>\n" +
                    "</div>\n").appendTo("[class='content']");
            }

            //使用textContent将内容插入到页面文本模块
            document.getElementById("datail").textContent = content[0];
            /*热门推荐榜前三*/
            var types = wos.type;
            $.get("Blog/showSuggest", {"type": types}, function (showsuggesstion) {
                var showsuggesstion1 = showsuggesstion.result;
                $("div[name='前三推荐']").empty();
                for (var i = 0; i < showsuggesstion1.length; i++) {
                    $(" <div class=\"layui-col-md4\">\n" +
                        "<div class=\"layui-card\">\n" +
                        "<a  class=\"layui-card-body recommend\" title='热门标题' id='clicknumber' name='" + showsuggesstion1[i].blogid + "'>\n" +
                        "<img src=\"./static/images/list_img.png\">\n" +
                        "<p title='三个热门榜' name='" + showsuggesstion1[i].blogid + "' >" + showsuggesstion1[i].title + "</p>\n" +
                        "</a>\n" +
                        "</div>\n" +
                        "</div>").appendTo("div[name='前三推荐']")
                }
            });
        });
    });
    $("input[type='image']").click(function () {
        alert("你已经捐款1000万");
    });
</script>
<script type="text/javascript">
    /*详情页面的热门文章推荐*/
    $.get("Blog/findBlogTextByClickNumber", function (rs) {
        $("tbody[title='详情热门榜']").empty();
        var wos = rs.result;
        sessionStorage.setItem("wos", wos)
        for (var i = 0; i < wos.length; i++) {
            $("<tr>\n" +
                "<td><a  title='热门榜' id='clicknumber' data-value='" + wos[i].blogid + "' name='" + wos[i].blogid + "'>" + wos[i].title + "</a></td>" +
                "</tr>").appendTo("tbody[title='详情热门榜']");
        }
    });

    /*详情页面的热门榜文章的跳转对应的详情页*/
    $(document).on("click", "a[title='热门榜']", function () {
        sessionStorage.clear();
        var blogid = $(this).attr("name");
        sessionStorage.setItem("blogid", blogid);
        $.get("Blog/updateClickNumber", {"blogid": blogid}, function () {
        });
        window.location.href = "http://localhost:8080/detail.html";
    });

    $(document).on("click", "a[title='本文链接']", function () {
        sessionStorage.clear();
        var blogid = $(this).attr("name");
        sessionStorage.setItem("blogid", blogid);
        $.get("Blog/updateClickNumber", {"blogid": blogid}, function () {
        });
        window.location.href = "http://localhost:8080/detail.html";
    });

    /*详情页面热门推荐前三的跳转详情的功能*/
    $(document).on("click", "p[title='三个热门榜']", function () {
        sessionStorage.clear();
        var blogid = $(this).attr("name");
        sessionStorage.setItem("blogid", blogid);
        $.get("Blog/updateClickNumber", {"blogid": blogid}, function () {
        });
        window.location.href = "http://localhost:8080/detail.html";
    })
</script>
<script type="text/javascript">
    $(document).ready(function () {
        var name1 = localStorage.getItem("username1");
        $("<tr><td>" + name1 + "</td></tr>").appendTo("span[title='name1']")
    });
</script>
</html>